import {ComponentType} from 'react'
import Taro, {Component, Config} from '@tarojs/taro'
import {observer, inject} from '@tarojs/mobx'

import {Form, View, Textarea, Input, Button} from '@tarojs/components'
import {toJS} from "mobx";
import {IStoreProps} from '../../store/Stores'
import {getRuntime} from '../../utils/common'


import './index.less'
import './demand.less'

interface IHomeProps extends IStoreProps {
}

@inject("stores")
@observer
class Services extends Component<IHomeProps> {

  state = {
    publicationType: "2", //  (1 = Demand , 2 = Service , 3 = Position , 4 = Rresume )
    description: '',
    contacts: '',
    phone: '',
    wechatNo: '',
    qqNo: '',
    address: '',
    loading: false,
    disabled: false,
    submitText: '立即提交'
  }

  componentWillMount() {
    Taro.setNavigationBarTitle({title: '提供服务'})
  }

  formSubmit(e) {
    const {homeStore} = this.props.stores
    let {publicationType} = this.state
    let {description, contacts, phone, wechatNo, qqNo, address} = e.detail.value
    if (!description) {
      getRuntime().showToast('服务内容不能为空~')
      return
    }
    if (!contacts) {
      getRuntime().showToast('联系人不能为空~')
      return
    }
    if (!phone) {
      getRuntime().showToast('联系电话不能为空~')
      return
    }
    this.setState({
      loading: true,
      disabled: true,
      submitText: '数据提交中...'
    })
    homeStore.saveUserInfomations({
      form: {
        publicationType,
        description,
        contacts,
        phone,
        wechatNo,
        qqNo,
        address,
      },
      callBack: () => {
        this.setState({
          loading: false,
          disabled: false,
          submitText: '立即发布'
        })
        getRuntime().showToast('数据提交成功,页面即将跳转~')
        setTimeout( () => {
          getRuntime().navigateTo('/pages/newest/index')
        },2000)
      }
    })
  }

  render() {
    let { loading,disabled,submitText } = this.state
    return (
      <View className='from-wrap'>
        <Form onSubmit={this.formSubmit.bind(this)}>
          <View className='input-group'>
            <Textarea className='from-textarea' placeholderClass='placeholder-class'
                      placeholder='请填写您要提供的服务内容(必填)'
                      maxlength={-1}
                      name='description'
            />
          </View>
          <View className='interval'/>
          <View className='item-group pt0 pb0'>
            <View className='input-group'>
              <View className='input-name is-require'>联系人</View>
              <Input className='from-input' placeholder='请填写联系人姓名' placeholderClass='placeholder_class'
                     name='contacts'
              />
            </View>

            <View className='input-group'>
              <View className='input-name is-require'>联系电话</View>
              <Input className='from-input' type={"number"} maxLength={11} placeholderClass='placeholder_class' placeholder='请填写联系电话' name='phone'/>
            </View>

            <View className='input-group input-switch'>
              <View className='input-name'>微信号</View>
              <Input className='from-input' placeholderClass='placeholder_class' placeholder='请填写微信号' name='wechatNo'/>
            </View>

            <View className='input-group'>
              <View className='input-name'>QQ号</View>
              <Input className='from-input' type={"number"} maxLength={11} placeholderClass='placeholder_class' placeholder='请填写QQ号' name='qqNo'/>
            </View>
            <View className='input-group '>
              <View className='input-name'>联系地址</View>
              <Input className='from-input' placeholderClass='placeholder_class' placeholder='请填写联系地址' name='address'/>
            </View>
          </View>

          <Button className='from-submit' formType="submit" loading={loading} disabled={disabled}>{submitText}</Button>
        </Form>
      </View>
    )
  }
}

export default Services
